<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        .login-wrapper {
            background-color: #fff;
            width: 80%;
            height: 100%;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
			padding-top: 20px;
        }
		.btn-panel{
			text-align: center;
            padding: 10px;
            width: 98%;
            margin-top: 40px;
            background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
            color: #fff;
		}
		#myTable {
			border-collapse: collapse;  /* 合并边框 */
			width: 100%;  /* 设置表格宽度 */
			margin-bottom: 20px;  /* 设置表格和下方元素的间距 */
		}
		#myTable th, #myTable td {
			border: 1px solid black;  /* 设置表格边框 */
			padding: 8px;  /* 设置单元格内边距 */
			text-align: left;  /* 设置单元格文本对齐方式 */
		}
		#myTable th {
			background-color: #f2f2f2;  /* 设置表头背景颜色 */
			cursor: pointer; 
		}
		#myTable tr:hover {
			background-color: #f5f5f5;  /* 鼠标悬停时的背景颜色 */
		}
    </style>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/config.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		//接收参数
		var url = 'query_myt',token = getUrlParam('token');
		var has_devid = [],has_submit = [],request_data = [];

		if(url.length>0){

			$.ajax({
				url: url,
				data: {},
				success: function(res){
				  var html_str = '';
				  if(res.code==200){
					  var data = res.msg;
					  if($.isEmptyObject(data)==false){
						for (let key in data) {
							request_data[key] = data[key];
							if($.inArray(key,has_devid)==-1){
								//放入数组
								has_devid.push(key);
								var checked = '';
								if($.inArray(key,has_submit)!=-1)
									checked = "checked";
								html_str += '<tr><td><input type="checkbox" name="devid" value="'+key+'" '+checked+'/></td><td>'+key+'</td></tr>';
							}
						}
					  }
					  $("#myTable").append(html_str);
				  }
				}
			});

			//定时刷新数据
			setInterval(function(){
				//需要周期执行的代码
				$.ajax({
					url: url,
					data: {},
					success: function(res){
					  var html_str = '';
					  if(res.code==200){
						  var data = res.msg;
						  if($.isEmptyObject(data)==false){
							for (let key in data) {
								request_data[key] = data[key];
								if($.inArray(key,has_devid)==-1){
									//放入数组
									has_devid.push(key);
									var checked = '';
									if($.inArray(key,has_submit)!=-1)
										checked = "checked";
									html_str += '<tr><td><input type="checkbox" name="devid" value="'+key+'" '+checked+'/></td><td>'+key+'</td></tr>';
								}
							}
						  }
						  $("#myTable").append(html_str);
					  }
					}
				});
			}, 20000);  //20秒一次
		}

		$("#submit").click(function(){
			var ip_arr=$('input[name="devid"]:checked'),devid_arr={};
			
			for(var i=0;i<ip_arr.length;i++){
				var ip = ip_arr.eq(i).val();
				devid_arr[ip] = request_data[ip];
			}
			var params = {'token':token,'devid':JSON.stringify(devid_arr)};
			//远程接口调用
			$.ajax({
			  url: 'api/api_saas.php',
			  data: {type:'add_server',data:JSON.stringify(params)},
			  success: function(res){
				  var result = $.parseJSON(res);
				  if(result.code==200){
					  //将已经汇报了的设备写入表
						$.each(devid_arr, function(key, value) {
							has_submit.push(key)
						});
					  alert('操作成功');
				  }else{
					  alert('操作失败');
				  }
			  }
			});
		});
	});
	
	//获得地址栏参数
	function getUrlParam(name)
	{
		//构造一个含有目标参数的正则表达式对象
		var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
		//匹配目标参数
		var r = window.location.search.substr(1).match(reg);
		//返回参数值
		if (r!=null) return unescape(r[2]); return null;
	}

</script>
<body>
    <div class="container">
        <div class="login-wrapper">
			<div class="data-panel">
				<table id="myTable">  
					<tr><th><input type="checkbox"/></th><th>IP</th></tr>
				</table>  
			</div>
			<div class="btn-panel" id="submit">提交</div>
        </div>
    </div>
</body>
</html>